@charset "utf-8";
@import "./base.scss";
@import "../lib/hotcss-v2.0.1/imochen-hotcss/src/px2rem.scss";

$designWidth: 640;
// 头部
header {
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  height: px2rem(75);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #910657, #f71c5a);
  .log-wrap {
    margin-left: px2rem(23);
    overflow: hidden;
    img {
      // vertical-align: middle;
      height: px2rem(65);
      width: px2rem(65);
    }
  }
  .search-wrap {
    position: relative;
    margin-left: px2rem(15);
    margin-right: px2rem(31);
    flex: 1 0;
    background-color: #900e3e;
    border-radius: px2rem(53);
    // color: rgb(253, 253, 253);
    height: px2rem(51);
    display: flex;
    justify-content: start;
    align-items: center;
    input {
      color: rgb(253, 253, 253);
      display: inline-block;
      margin-left: px2rem(25);
      width: 100%;
      line-height: px2rem(28);
      height: px2rem(26);
      font-size: px2rem(22);
      background: none;
      border: none;
    }
    i {
      position: absolute;
      top: px2rem(13);
      right: px2rem(19);
      font-size: px2rem(27);
      line-height: px2rem(27);
      color: #a96c89;
    }
  }
  .Message-wrap {
    margin-right: px2rem(22);
    color: #e3e3e3;
    i {
      display: block;
      font-size: px2rem(45);
      line-height: px2rem(45);
    }
    span {
      display: block;
      font-size: px2rem(18);
      line-height: px2rem(18);
      text-align: center;
    }
  }
}

// 间隔层
.layer-interval {
  height: px2rem(16);
  width: 100%;
  background-color: #eeeeee;
}

main {
  margin: px2rem(75) 0 px2rem(84);
  // 轮播图
  .swiper-container {
    position: relative;
    width: px2rem(640);
    height: px2rem(240);
    // border-bottom: 1px solid #b3abb0;
    // border-bottom: px2rem(5) solid #b3abb0;
    box-sizing: border-box;
    &::after {
      // position:absolute;
      // left: 0;
      // top:0;
      // width: 200%;
      // height:200%;
      // transform:scale(0.5,0.5);
      // transform-origin:top left;
      // border: 1px solid #b3abb0;
      @include border1px(#b3abb0);
    }
    img {
      vertical-align: middle;
      width: px2rem(640);
      height: px2rem(240);
    }
    .swiper-pagination {
      position: absolute;
      bottom: px2rem(14);
      left: 50%;
      transform: translate(-50%, 0);
      span {
        width: px2rem(13);
        height: px2rem(13);
      }
      .swiper-pagination-bullet {
        margin-left: px2rem(11);
      }
      .swiper-pagination-bullet-active {
        background: rgb(253, 253, 253);
      }
    }
  }
  // 导航栏
  .layer-navigation {
    .navigation-wrap {
      background: #ffffff;
      border: 1px solid #f5f5f5;
      border-left: none;
      border-right: none;
      box-sizing: border-box;
      ul {
        height: px2rem(114);
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        li {
          display: inline-block;
          a {
            .iconfont {
              display: block;
              font-size: px2rem(36);
              width: px2rem(61);
              height: px2rem(61);
              line-height: px2rem(61);
              border-radius: 50%;
              text-align: center;
              color: rgb(253, 253, 253);
            }
            .icon-muying {
              background: #7f47dd;
            }
            .icon-chaoshi {
              background: #f32363;
            }
            .icon-miaosha {
              background: #d6d623;
            }
            .icon-yichongzhiqianyue {
              background: #ff8a2f;
            }
            p {
              margin-top: px2rem(8);
              font-size: px2rem(19);
              text-align: center;
            }
          }
        }
      }
    }
  }
  // 公共模板
  .item-area {
    background: #ffffff;
    .item-area-hd {
      width: 100%;
      height: px2rem(56);
      box-sizing: border-box;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      &::before {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        left: px2rem(23);
        width: px2rem(13);
        height: 100%;
      }
      .item-area-hd-l,
      .item-area-hd-r {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .item-area-hd-l {
        .iconfont {
          text-align: center;
          font-size: px2rem(32);
          height: px2rem(32);
          width: px2rem(32);
          line-height: px2rem(32);
          margin-left: px2rem(48);
        }
        .item-area-hd-l-txt {
          margin-left: px2rem(13);
          font-size: px2rem(24);
          height: px2rem(24);
          line-height: px2rem(24);
        }
      }
      .item-area-hd-r {
        margin-right: px2rem(22);
        span {
          margin-right: px2rem(12);
          font-size: px2rem(21);
          height: px2rem(21);
          line-height: px2rem(21);
        }
        .iconfont {
          display: inline-block;
          font-size: px2rem(16);
          height: px2rem(24);
          width: px2rem(24);
          line-height: px2rem(24);
          text-align: center;
          border-radius: px2rem(5);
          color: #fff;
        }
      }
    }
    .item-area-bd {
      width: 100%;
      height: px2rem(250);
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eaeaea;
      padding: 0 px2rem(29);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .item-area-bd-l {
        img {
          border: 1px solid #e6e4e4;
          width: px2rem(180);
          height: px2rem(230);
          box-sizing: border-box;
          vertical-align: middle;
        }
      }
      .item-area-bd-r {
        display: inline-block;
        overflow: hidden;
        ul {
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-wrap: wrap;
          align-content: space-between;
          width: px2rem(378);
          height: px2rem(230);
          li {
            float: left;
            overflow: hidden;
          }
          img {
            border: 1px solid #e6e4e4;
            box-sizing: border-box;
            vertical-align: middle;
          }
          .Short-picture {
            width: px2rem(112);
            height: px2rem(103);
            box-sizing: border-box;
          }
          .Long-picture {
            width: px2rem(225);
            height: px2rem(103);
            box-sizing: border-box;
          }
        }
      }
    }
  }
  // 秒杀区域
  .layer-Spike {
    $item-color: #faaf0d;
    .Spike-hd {
      &::before {
        background: $item-color;
      }
      .Spike-hd-l {
        .iconfont {
          color: $item-color;
        }
        .Spike-txt {
          color: $item-color;
        }
        .Spike-hd-l-reciprocal {
          margin-left: px2rem(17);
          font-size: px2rem(25);
          .value,
          .Separator {
            display: block;
            float: left;
            height: px2rem(30);
            line-height: px2rem(30);
            margin-left: px2rem(5);
          }
          .value {
            color: #fff;
            text-align: center;
            width: px2rem(21);
            background: #121212;
          }
        }
      }
      .Spike-hd-r {
        span {
          color: $item-color;
        }
        .iconfont {
          background: $item-color;
        }
      }
    }
    .Spike-bd {
      display: flex;
      justify-content: center;
      align-items: center;
      height: px2rem(240);
      padding: 0 px2rem(33);
      ul {
        margin-top: px2rem(5);
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        li {
          flex: 0 0 px2rem(182);
          display: inline-block;
          overflow: hidden;
          p {
            display: inline-block;
            overflow: hidden;
            img {
              border: 1px solid #e6e4e4;
              float: left;
              width: px2rem(178);
              height: px2rem(180);
              vertical-align: middle;
              box-sizing: border-box;
            }
          }
          h3 {
            display: inline-block;
            margin-top: px2rem(7);
            img {
              width: px2rem(113);
              height: px2rem(20);
            }
          }
          i {
            display: inline-block;
            margin: px2rem(7) 0 0 px2rem(7);
            img {
              width: px2rem(57);
              height: px2rem(15);
            }
          }
        }
      }
    }
  }
  // 女装区域
  .layer-clothes {
    $item-color: #fa0d61;
    .clothes-hd {
      &::before {
        background: $item-color;
      }
      .clothes-hd-l {
        .iconfont {
          color: $item-color;
        }
        .clothes-txt {
          color: $item-color;
        }
      }
      .clothes-hd-r {
        span {
          color: $item-color;
        }
        .iconfont {
          background: $item-color;
        }
      }
    }
    .clothes-bd {
      padding: 0 px2rem(31) 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      .clothes-bd-l {
        img {
          border: 1px solid #e6e4e4;
          width: px2rem(180);
          height: px2rem(230);
          box-sizing: border-box;
          vertical-align: middle;
        }
      }
      .clothes-bd-r {
        ul {
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-wrap: wrap;
          align-content: space-between;
          width: px2rem(378);
          height: px2rem(230);
          li {
            a {
              position: relative;
              display: inline-block;
              img {
                width: px2rem(112);
                height: px2rem(102);
                border: 1px solid #e6e4e4;
                box-sizing: border-box;
                vertical-align: middle;
              }
              .clothes-bd-r-txt {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: px2rem(50);
                background: #fbf9f9;
                opacity: 0.6;
                border-top: 1px solid #e6e4e4;
                box-sizing: border-box;
                h2,
                h3 {
                  color: #252525;
                  font-size: px2rem(15);
                  height: px2rem(15);
                  line-height: px2rem(15);
                  text-align: center;
                }
                h3 {
                  margin-top: px2rem(4);
                  color: #fa0d61;
                }
                h2 {
                  margin-top: px2rem(8);
                }
              }
            }
          }
        }
      }
    }
  }
  // 运动区域
  .layer-sport {
    $item-color: #f9a90f;
    .sport-hd {
      &::before {
        background: $item-color;
      }
      .sport-hd-l {
        .iconfont {
          color: $item-color;
        }
        .sport-txt {
          color: $item-color;
        }
      }
      .sport-hd-r {
        span {
          color: $item-color;
        }
        .iconfont {
          background: $item-color;
        }
      }
    }
    .sport-bd {
    }
  }
  // 箱子配饰区域
  .layer-handbag {
    $item-color: #bf0ff9;
    .handbag-hd {
      &::before {
        background: $item-color;
      }
      .handbag-hd-l {
        .iconfont {
          color: $item-color;
        }
        .handbag-txt {
          color: $item-color;
        }
      }
      .handbag-hd-r {
        span {
          color: $item-color;
        }
        .iconfont {
          background: $item-color;
        }
      }
    }
    .handbag-bd {
    }
  }
  // 母婴玩具区域
  .layer-toy {
    $item-color: #f9820f;
    .toy-hd {
      &::before {
        background: $item-color;
      }
      .toy-hd-l {
        .iconfont {
          color: $item-color;
        }
        .toy-txt {
          color: $item-color;
        }
      }
      .toy-hd-r {
        span {
          color: $item-color;
        }
        .iconfont {
          background: $item-color;
        }
      }
    }
    .toy-bd {
    }
  }
}

footer {
  z-index: 1000;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;

  .footer-list {
    background: #171717;
    color: #f6f6f6;
    ul {
      height: px2rem(84);
      display: flex;
      justify-content: space-around;
      align-items: center;
      li {
        i {
          display: block;
          font-size: px2rem(46);
          // width: px2rem(55);
          width: 100%;
          height: px2rem(46);
          line-height: px2rem(46);
          text-align: center;
        }
        span {
          margin-top: px2rem(2);
          // width: px2rem(55);
          width: 100%;
          display: block;
          font-size: px2rem(18);
          height: px2rem(18);
          line-height: px2rem(18);
          text-align: center;
        }
        .icon-leimupinleifenleileibie {
          margin-left: px2rem(2);
        }
        .icon-gouwuche {
          margin-left: px2rem(-6);
        }
      }
    }
  }
}
